<template>
  <a-card :bordered="false" v-show="!!_searchData.length">
    <!-- <title-name
      v-if="showTitleName"
      title="搜索"
    /> -->
    <a-form class="ant-advanced-search-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :form="form">
      <a-row :gutter="12" v-bind="isFlex">
        <a-col v-for="(item, i) in searchData2" :key="i"
          :span="item.span || Math.floor(24 / (currentRowCount > searchData2.length ? searchData2.length : currentRowCount))"
          :style="{ display: i < count ? 'block' : 'none' }">
          <a-form-item v-if="item.type === 'button'" class="search-btn-container" :wrapperCol="{ span: 24 }">
            <a-button type="primary" html-type="submit" @click="search"> 搜索 </a-button>
            <a-button v-if="isShowReset" :style="{ marginLeft: '8px' }" @click="handleReset()"> 重置 </a-button>
            <a v-if="_searchData.length >= currentRowCount" :style="{ marginLeft: '8px', fontSize: '16px' }"
              @click="toggle">
              <a-divider type="vertical" />
              {{ expand === true ? '展开' : '收起' }}
              <a-icon :type="expand ? 'down' : 'up'" />
            </a>
          </a-form-item>
          <!--
                    {
                    name: '合同类型',
                    value: 'counterParty',
                    type: 'select',
                    data: [],
                    request: () => selectOption({ type: 18 }),
                    key = ['name', 'id']//默认为['name', 'id']，可以自定义
          },-->
          <a-form-item v-else-if="item.type === 'select'" :label="`${item.name}`">
            <a-select @change="changeSelect(item,$event)" v-decorator="item.setInitValue? [item.value, { initialValue: item.initValue }] : [item.value]" autocomplete="off" allow-clear style="width: 100%"
                      :placeholder="`${item.placeholder || '请选择'}`" v-bind="item.attrs" v-on="item.listeners || {}">
              <a-select-option v-for="(i, index) in item.data" :key="index" :disabled="i.enabled === false"
                :value="i.value">
                {{ i.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-else-if="item.type === 'selectMode'" :label="`${item.name}`">
            <a-select v-decorator="[item.value]" showArrow mode="multiple" style="width: 100%" :placeholder="item.placeholder?item.placeholder:'请选择'"
              autocomplete="off" v-bind="item.attrs" v-on="item.listeners || {}" :maxTagCount="item.maxTagCount || 100" :maxTagTextLength="item.maxTagTextLength || 100">
              <a-select-option v-for="(i, index) in item.data" :key="index" :disabled="i.enabled === false"
                :value="i.value">
                {{ i.label }}
              </a-select-option>
            </a-select>
            <!-- <a-select
              v-decorator="[item.value]"
              allow-clear
              style="width: 100%"
              placeholder="请选择"
              v-bind="item.attrs"
              v-on="item.listeners || {}"
            >
              <a-select-option
                v-for="(i, index) in item.data"
                :key="index"
                :disabled="i.enabled === false"
                :value="i.value"
              >
                {{ i.label }}
              </a-select-option>
            </a-select>-->
          </a-form-item>
          <a-form-item v-else-if="item.type === 'input'" :label="`${item.name}`">
            <a-input v-decorator="[item.value]" :placeholder="`${item.placeholder || '请输入'}`" autocomplete="off" allow-clear :max-length="50" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'number'" :label="`${item.name}`">
            <a-input v-decorator="[item.value]" placeholder="请输入" autocomplete="off" type="number" :max-length="30" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'timeRange'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" autocomplete="off"
              format="YYYY-MM-DD HH:mm:ss" show-time />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'timeRangeFormat'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" autocomplete="off" show-time   />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'timeRangeFormatx'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD HH:mm:ss" value-format="x"
              autocomplete="off" show-time  />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'dateRange'" :label="`${item.name}`">
            <a-range-picker
              v-decorator="item.setInitValue ? [item.value, { initialValue: item.initValue }] : [item.value]"
              format="YYYY-MM-DD" autocomplete="off" v-bind="item.attr" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'dateRangeFormat'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD" autocomplete="off"
              value-format="YYYY-MM-DD 00:00:00" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'dateRangeFormatx'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD" value-format="x"
              autocomplete="off" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'monthRange'" :label="`${item.name}`">
            <a-range-picker
              v-decorator="item.setInitValue ? [item.value, { initialValue: item.initValue }] : [item.value]"
              v-bind="item.attr" format="YYYY-MM" autocomplete="off" :mode="mode[item.type]" @panelChange="
                (value, mode) => {
                  handlePanelChange(item, value, mode)
                }
              " />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'yearRange'" :label="`${item.name}`">
            <a-range-picker v-decorator="[item.value]" v-bind="item.attr" :format="['YYYY', 'YYYY']"
              :mode="mode[item.type]" :open="item.open" autocomplete="off" @panelChange="
                (value, mode) => {
                  handleYearRangePanelChange(item, value, mode)
                }
              " @openChange="(e) => handleOpenChange(e, item)">
            </a-range-picker>
          </a-form-item>
          <a-form-item v-else-if="item.type === 'month'" :label="`${item.name}`">
            <a-month-picker
                    placeholder="请选择"
              v-decorator="item.setInitValue ? [item.value, { initialValue: item.initValue }] : [item.value]"
              v-bind="item.attr" format="YYYY-MM" value-format="YYYY-MM" autocomplete="off" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'monthFormat'" :label="`${item.name}`">
            <a-month-picker v-decorator="[item.value]" format="YYYY-MM" value-format="YYYY-MM-01 00:00:00"
                            placeholder="请选择"
              autocomplete="off" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'date'" :label="`${item.name}`">
            <a-date-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD" autocomplete="off" placeholder="请选择" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'dateFormat'" :label="`${item.name}`">
            <a-date-picker v-decorator="[item.value]" v-bind="item.attr" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD 00:00:00" autocomplete="off" placeholder="请选择" />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'year'" :label="`${item.name}`">
            <a-date-picker
                    placeholder="请选择"
              v-decorator="item.setInitValue ? [item.value, { initialValue: item.initValue }] : [item.value]"
              :mode="item.type" v-bind="item.attr" format="YYYY" :open="yearsOpen" autocomplete="off"
              @change="yearsOpen = true" @openChange="yearOpenChange" @panelChange="
                (value, mode) => {
                  handleYearPanelChange(item, value, mode)
                }
              " />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'tree-select'" :label="`${item.name}`">
            <a-tree-select v-decorator="[item.value]" @change="
              (id, label) => {
                item.isSeachName && isSeachName(id, label, item)
              }
            " style="width: 100%" :tree-data="item.data" v-bind="item.attrs"
                           treeNodeFilterProp="title"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择" />
          </a-form-item>
          <!--
                    范围输入框
                    {
                        name: '涉及金额',
                        type: 'rangeInput',
                        value: 'rewardAndPenaltyAmount',
                        rangeKey: ['Start', 'End']//可不传，不传默认为'Start', 'End'
                      },
          -->
          <a-form-item v-else-if="item.type === 'rangeInput'" :label="`${item.name}`">
            <a-row type="flex" justify="space-between" align="middle" style="flex-wrap: nowrap">
              <BaseInputNumber ref="compare1" v-decorator="
                item.setInitValue
                  ? [item.attr && item.attr.rangeFormat ? item.attr.rangeFormat[0] : item.value + (item.rangeKey ? item.rangeKey[0] : 'Start'), { initialValue: item.initValue }]
                  : [item.attr && item.attr.rangeFormat ? item.attr.rangeFormat[0] : item.value + (item.rangeKey ? item.rangeKey[0] : 'Start')]
              " :placeholder="item.attr && item.attr.placeholderMin ? item.attr.placeholderMin : '请输入'"
                style="width: 45%; text-align: center" :min="item.attr && item.attr.min ? item.attr.min : 0"
                :max="item.attr && item.attr.max ? item.attr.max : Infinity"
                :precision="item.attr && item.attr.precision ? item.attr.precision : 0"
                @blur="handleCompare($refs.compare2[0].$el, $event.target)" />
              <span style="flex-shrink: 0">至</span>
              <BaseInputNumber ref="compare2" v-decorator="
                item.setInitValue
                  ? [item.attr && item.attr.rangeFormat ? item.attr.rangeFormat[1] : item.value + (item.rangeKey ? item.rangeKey[1] : 'End'), { initialValue: item.initValue }]
                  : [item.attr && item.attr.rangeFormat ? item.attr.rangeFormat[1] : item.value + (item.rangeKey ? item.rangeKey[1] : 'End')]
              " :placeholder="item.attr && item.attr.placeholderMax ? item.attr.placeholderMax : '请输入'"
                :min="item.attr && item.attr.min ? item.attr.min : 0"
                :max="item.attr && item.attr.max ? item.attr.max : Infinity"
                :precision="item.attr && item.attr.precision ? item.attr.precision : 0"
                style="width: 45%; text-align: center" @blur="handleCompare($event.target, $refs.compare1[0].$el)" />
            </a-row>
          </a-form-item>
          <template v-else>
            <a-form-item v-if="!item.hidden" :label="`${item.name}`">
<!--              {{item.type.name === 'orgTreeSelect'}}-->
<!--              这里为啥不使用动态组件 因为不会被缓存-->
              <template v-show="showCom">
                <orgTreeSelect
                        v-if="item.type && item.type.name === 'orgTreeSelect'"
                        :key="item.valueKey"
                        v-decorator="item.setInitValue ? [item.valueKey, { initialValue: item.initValue }] : [item.valueKey]"
                        :form="form.getFieldsValue()" :auto-selected="item.autoSelected || false" is-maintenance allow-clear
                        :is-show-project-status="true" :is-search-page="true" :is-query-projec-detail="false"
                        :check-strictly="false" :need-tags="[]" :projectId="projectId" v-bind="{ ...item, ...item.attrs }"
                        v-on="{ ...$listeners, ...(item.listeners || {}) }" @resetSelf="resetFormItem(item.valueKey)"
                        @select="selectOrg"
                ></orgTreeSelect>
<!--                &lt;!&ndash; 自定义组件 &ndash;&gt;-->
                <components :is="item.type"  :key="item.valueKey"
                            v-if="item.type && item.type.name !== 'orgTreeSelect'"
                            v-decorator="item.setInitValue ? [item.valueKey, { initialValue: item.initValue }] : [item.valueKey]"
                            :form="form.getFieldsValue()" :auto-selected="item.autoSelected || false" is-maintenance allow-clear
                            :is-show-project-status="true" :is-search-page="true" :is-query-projec-detail="false"
                            :check-strictly="false" :need-tags="[]" :projectId="projectId" v-bind="{ ...item, ...item.attrs }"
                            v-on="{ ...$listeners, ...(item.listeners || {}) }" @resetSelf="resetFormItem(item.valueKey)"
                            @select="selectOption" />
              </template>

            </a-form-item>
          </template>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>
import moment from 'moment'
import dayjs from 'dayjs'
import cloneDeep from 'lodash.clonedeep'
import Comments from '../../views/Legal/caseLawyerLetter/claimEstablishment/components/comments'
import orgTreeSelect from "@/components/OrgTreeSelect"

export default {
  name: 'a' + Date.now(),
  components: { Comments , orgTreeSelect},
  props: {
    searchData: {
      // 页面搜索条件dateRangeFormatx
      type: Array,
      default: () => []
    },
    refreshCom: {
      // 是否在重置操作时，刷新自定义组件
      type: Boolean,
      default: false
    },
    isExpand: {
      // 是否在重置操作时，刷新自定义组件
      type: Boolean,
      default: true
    },
    isShowReset: {
      // 是否显示重置按钮
      type: Boolean,
      default: true
    },
    showTitleName: {
      type: Boolean,
      default: true
    },
    // 是否需要在搜索时过滤空值
    needFilterEmptyVal: {
      type: Boolean,
      default: true
    },
    // 每行显示几列
    rowCount: {
      type: Number,
      default: 4
    },
    // label标签布局
    labelCol: {
      type: Object,
      default: () => ({
        span: 7
      })
    },
    // 输入控件布局
    wrapperCol: {
      type: Object,
      default: () => ({
        span: 17
      })
    },
    // tab切换重置搜索
    clickTabHandleReset: {
      type: String,
      default: ''
    },
    // 自定义重置
    customReset:{
      type: Function,
      default: void 0
    },
    //搜索条件联动，清空被联动输入框字段
    empty:{
      type: Boolean,
      default: false,
    },
    //清空被联动输入框字段
    emptyField:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      projectId: '',
      showCom: true,
      expand: true,
      // pathName: this.$route.path,
      mode: {
        monthRange: ['month', 'month'],
        yearRange: ['year', 'year']
      },
      form: this.$form.createForm(this),
      yearsOpen: false, //解决年份面板点击不关闭问题
      yearRangeOpen: false,
      treeSelectlabel: '',
      // searchData2: []
      currentRowCount: 4,
    }
  },
  computed: {
    count() {
      return this.expand ? this.currentRowCount : this.searchData2.length
    },
    _searchData() {
      // 业务查询的时候去除所属单位和其关联的搜索项，本不应该在这里处理，但实在页面太多，节省时间在这里统一过滤
      let _searchData = []
      if (this.$store.state.user.activeCodes[1] === 'prma_buqu') {
        _searchData = this.searchData.filter((item) =>
                (item.valueKey !=='_ssdw'&&item.valueKey !== 'searchQuery') || (item.keyValue && item.keyValue.indexOf('searchQuery')))
      } else {
        _searchData = this.searchData
      }
      _searchData.map((item) => {
        if (item.type === 'select' && item.request) {
          item.request().then((res) => {
            item.data =
              res.data &&
              res.data.map((v) => {
                // item.key = ['name', 'id']
                if (item.key) return { label: v[item.key[0]], value: v[item.key[1]] }
                else return { label: v.name, value: v.id }
              })
            // this.getSearchList()
          })
        }
        if (item.type === 'tree-select' && item.request) {
          item.request().then((res) => {
            item.data = res.data
          })
        }
      })
      // this.getSearchList()
      return _searchData
    },
    searchData2() {
      let data = []
      let arr1 = cloneDeep(this._searchData).splice(0, this.currentRowCount - 1)
      arr1.push({
        type: 'button',
        name: '',
        value: ''
      })
      let arr2 = cloneDeep(this._searchData).splice(this.currentRowCount - 1)
      data = arr1.concat(arr2)
      return data
    },
    isFlex() {
      let flex = {}
      if (this._searchData && this._searchData.length <= 1) {
        flex = {
          type: 'flex',
          justify: 'space-between',
          align: 'middle'
        }
      }
      return flex
    }
  },
  watch: {
    isExpand: {
      immediate: true,
      handler(val) {
        this.expand = this.isExpand
      }
    },
    // 监听路由变更,关闭年份面板
    $route(to, from) {
      this.yearsOpen = false
      this.setDefaultValue();
    },
    clickTabHandleReset: {
      handler(val) {
        val && this.handleReset()
      }
    }
    //监听路由变更
    // $route(newVal) {
    //   let { fullPath } = newVal
    //   let tabs = this.$store.getters['tabInfo/GET_PATHMAP']
    //   if (fullPath === '/index') return
    //   //检查当前tab里面有这条数据
    //   let resIndex = tabs?.findIndex((v) => v.path === newVal.path)
    //   //已有tab，可能是详情页面返回，也可能是tab页跳tab页
    //   if (resIndex !== -1) {
    //     console.log(tabs[resIndex])
    //     //如果this.tabs[resIndex].history.length > 4，那么说明是tab页跳tab页，然后要把history里面的从第4条开始的记录，全部给删除缓存
    //     if (tabs[resIndex].history.length === 4) {
    //       this.search()
    //     }
    //   }
    // }
  },
  // mounted() {
  //   console.log('mounted-----------searchData的Path', this.pathName)
  //   // 监听详情页返回刷新列表
  //   this.$bus.$on('handleRefresh' + this.pathName, () => {
  //     console.log('searchData里面的Path', this.pathName)
  //     this.search()
  //   })
  // },
  // beforeDestroy() {
  //   console.log('beforeDestroy-------searchData的Path', this.pathName)
  //   this.$bus.$off('handleRefresh' + this.pathName)
  // },
  // created() {

  // },
  mounted() {
     this.setDefaultValue();
    // 当搜索框宽度小于1360的时候，每行最多放三个
    const formWidth = document.querySelector('.ant-advanced-search-form')?.clientWidth
    this.currentRowCount = formWidth < 1360 && this.rowCount >= 4 ? 3 : this.rowCount
  },
  methods: {
    setDefaultValue(){
      if(this._searchData.findIndex(el=>el.value === 'planTypeId')>=0){
        if(this.$route.path == '/quality/specialProgram'){  //对施组方案审批管理特殊处理
          this.$nextTick(()=>{
            this.form.setFieldsValue('planTypeId','634286001728131072')
          })
        }else{
          this.$nextTick(()=>{
            this.form.setFieldsValue('planTypeId','')
          })
        }
      }
    },
    yearOpenChange(status) {
      this.yearsOpen = status
    },
    selectOrg(val) {
      if (val && val.length) {
        const lastValue = val[val.length - 1]
        if (lastValue.tageCode === 'PD') {
          this.$set(this, 'projectId', lastValue.projectId)
        }
      } else {
        this.$set(this, 'projectId', '')
      }
      if(this.empty){
           this.form.resetFields([this.emptyField])
        }
    },
    // 如果 orgTreeSelect 和其他组件公用 selectOrg 每次切换 projectId 会被清空
    selectOption(val) {
       if(this.empty){
           this.form.resetFields([this.emptyField])
        }
    },
    /**
     * 2021-12-1
     * this.searchData数组内部对象新增data属性变化，computed无法检测到，且只执行了一次
     * 导致有时候带request的select下拉框在请求到数据的时候无法显示，出现没有下拉数据的情况。
     */
    // getSearchList() {
    //   let data = []
    //   let arr1 = cloneDeep(this.searchData).splice(0, 2)
    //   arr1.push({
    //     type: 'button',
    //     name: '',
    //     value: ''
    //   })
    //   let arr2 = cloneDeep(this.searchData).splice(2)
    //   data = arr1.concat(arr2)
    //   this.searchData2 = data
    // },
    /*
     * val为范围输入框的第一个比较值，但不一定是第一个框
     * val1为范围输入框的第二个比较值，但不一定是第二个框
     *
     * 比较大小并提示
     * */
    handleCompare(val, val1) {
      if (!val.value) return
      if (!val1.value) return
      if (Number(val.value) >= Number(val1.value)) {
        // console.log('大于')
      } else {
        // this.form.resetFields()
        // val.value = ''//todo只是表面看不到值了，实际还是有。
        this.$message.warning('最大值不能小于最小值！')
      }
    },
    //工程分包管理，tree-select有些页面需求要传name
    isSeachName(e, label, item) {
      this.treeSelectlabel = label
    },
    resetFormItem(key) {
      this.form.resetFields([key])
    },
    moment,
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    disabledDate(current) {
      return current && current < moment().endOf('day')
    },
    disabledRangeTime(_, type) {
      if (type === 'start') {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56]
        }
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56]
      }
    },
    search() {
      // 查询触发父组件
      // e.preventDefault()
      this.form.validateFields((error, values) => {
        if (!error) {
          if (this.needFilterEmptyVal) {
            for (let key in values) {
              if (values[key] === undefined || (!values[key] && values[key] !== false && values[key] !== '' && values[key] !== 0)) {
                delete values[key]
              } // 过滤为undefined的数据
            }
          }
          /*
                      * 对于下面这个类型的处理，判断type为timeRange时，会自动加上value+'StartTime'和value+'EndTime'
                       {
                          name: '创建时间',
                          value: 'create',
                          type: 'timeRange'
                      },
                      * */
          for (const item of this._searchData) {
            if (item.type === 'timeRange' || item.type === 'timeRangeFormat' || item.type === 'dateRangeFormat') {
              let key = item.value
              let andtRangeTimes = values[key]
              if (andtRangeTimes) {
                values[key + 'StartTime'] = andtRangeTimes[0]
                values[key + 'EndTime'] = andtRangeTimes[1]
                values[key + 'Start'] = andtRangeTimes[0]
                values[key + 'End'] = andtRangeTimes[1]
              }
            }
            //dateRangeFormat如果是date这种类型的，那么把开始日期整到当天0点，结束日期整到当天23；59分
            //可以说是我傻逼了，没得办法了，用的地方太多了
            if (item.type === 'dateRangeFormat') {
              let key = item.value
              let andtRangeTimes = values[key] || [];
              if (andtRangeTimes && andtRangeTimes.length>0) {
                values[key + 'StartTime'] = dayjs(andtRangeTimes[0]).hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')
                values[key + 'EndTime'] = dayjs(andtRangeTimes[1]).hour(23).minute(59).second(59).format('YYYY-MM-DD HH:mm:ss')
                values[key + 'Start'] = dayjs(andtRangeTimes[0]).hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')
                values[key + 'End'] = dayjs(andtRangeTimes[1]).hour(23).minute(59).second(59).format('YYYY-MM-DD HH:mm:ss')
              }
            }
            if (item.type === 'timeRangeFormatx' || item.type === 'dateRangeFormatx') {
              let key = item.value
              let andtRangeTimes = values[key]
              if (andtRangeTimes) {
                values[key + 'StartTime'] = dayjs(Number(andtRangeTimes[0])).hour(0).minute(0).second(0).valueOf()
                values[key + 'EndTime'] = dayjs(Number(andtRangeTimes[1])).hour(23).minute(59).second(59).valueOf()
                values[key + 'Start'] = dayjs(Number(andtRangeTimes[0])).hour(0).minute(0).second(0).valueOf()
                values[key + 'End'] = dayjs(Number(andtRangeTimes[1])).hour(23).minute(59).second(59).valueOf()
              }
            }
            // 若表单为日期或时间范围,且有rangeFormat参数,则抽离成开始和结束时间,开始时间字段和结束时间字段名为rangeFormat的第一项和第二项枚举值
            if ((item.type === 'dateRange' || item.type === 'timeRange' || item.type === 'monthRange' || item.type === 'yearRange') && item.attr?.rangeFormat?.length > 0) {
              let key = item.value
              let andtRangeTimes = values[key]
              // console.log(andtRangeTimes)
              if (andtRangeTimes) {
                values[item.attr.rangeFormat[0]] = this.$dateFormat(andtRangeTimes[0], { monthRange: 'M', yearRange: 'Y', dateRange: 'D', timeRange: 'D' }[item.type])
                values[item.attr.rangeFormat[1]] = this.$dateFormat(andtRangeTimes[1], { monthRange: 'M', yearRange: 'Y', dateRange: 'D', timeRange: 'D' }[item.type])
                delete values[key]
              }
            }
            //工程分包管理，tree-select有些页面需求要传name
            if (item.type == 'tree-select' && item.isSeachName) {
              values[item.value] = this.treeSelectlabel?.[0]
            }
            // 自定义格式化表单值
            if (item.currentRender && typeof item.currentRender === 'function') {
              let key = item.value || item.valueKey
              values[key] = item.currentRender(values[key]) || values[key]
            }
          }
          for (let prop in values) {
            if ((values[prop] ?? '') === '') {
              delete values[prop]
            }
          }
          this.$emit('search', values)
          this.$emit('search2', values)
        }
      })
    },
    handleReset(state) {
      if(this._searchData.findIndex(el=>el.value === 'planTypeId')>=0){
        this.form.setFieldsValue({planTypeId:''})
      }
      this.form.resetFields()
      // 自定义重置用于解决有些重置需要重置为默认值
      if(typeof this.customReset === 'function'){
        this.customReset(this.form)
      }
      this.$emit('reset')
      this.form.validateFields((error, values) => {
        if (!error) {
          values.planTypeId = undefined;
          if (!state) {
            this.$emit('search', values)
            this.$emit('search2', values)
          }
        }
      })
      if (this.refreshCom) {
        this.showCom = false
        this.$nextTick(() => {
          this.showCom = true
        })
      }
    },
    toggle() {
      this.expand = !this.expand
      this.$emit('toggle', this.expand)
    },
    //获取下拉框的值
    changeSelect(item,event){
      this.$emit('changeSelect',event,item)
      if(this.empty){
           this.form.resetFields([this.emptyField])
        }

    },
    handlePanelChange(item, value, mode) {
      let param = {}
      param[item.value] = value
      this.form.setFieldsValue(param)
      this.mode[item.type] = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    handleYearRangePanelChange(item, value, mode) {
      item.open = !item.open
      // 若有表单值，则对比表单中起始时间，若开始时间小于结束时间，则矫正表单位置后重新设置表单
      if (value && value[0] > value[1]) {
        value = [value[1], value[0]]
      }
      this.form.setFieldsValue({ [item.value]: value })
      this.mode[item.type] = [mode[0] === 'date' ? 'year' : mode[0] || 'year', mode[1] === 'date' ? 'year' : mode[1] || 'year']
    },
    handleOpenChange(e, item) {
      // 打开或关闭时间选择器弹窗
      item.open = e
      let value = this.form.getFieldsValue([item.value])?.[item.value]
      // 若为关闭操作，且有表单值，则对比表单中起始时间，若开始时间小于结束时间，则矫正表单位置后重新设置表单
      if (!e && value && value[0] > value[1]) {
        value = [value[1], value[0]]
      }
      // 设置表单值
      this.form.setFieldsValue({ [item.value]: value })
    },
    handleYearPanelChange(item, value) {
      this.yearsOpen = false
      let param = {}
      param[item.value] = (value && value.format && value.format('YYYY')) || value || null
      this.form.setFieldsValue(param)
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

#components-form-demo-advanced-search {
  padding: 24px;
  background: #fff;
  margin-bottom: 20px;
}

/* .ant-advanced-search-project {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
} */

.ant-advanced-search-form .ant-form-item {
  display: flex;
  margin-bottom: 10px !important;
  justify-content: end;
}

/* 公共commmon.css里把布局写死了，也不能随便改，怕影响其他地方，只能深度重新覆盖 */
@{deep} .ant-col-1 {
  width: 4.16666667% !important;
}

@{deep} .ant-col-2 {
  width: 8.33333333% !important;
}

@{deep} .ant-col-3 {
  width: 12.5% !important;
}

@{deep} .ant-col-4 {
  width: 16.66666667% !important;
}

@{deep} .ant-col-5 {
  width: 20.83333333% !important;
}

@{deep} .ant-col-6 {
  width: 25% !important;
}

@{deep} .ant-col-7 {
  width: 29.16666667% !important;
}

@{deep} .ant-col-8 {
  width: 33.33333333% !important;
}

@{deep} .ant-col-9 {
  width: 37.5% !important;
}

@{deep} .ant-col-10 {
  width: 41.66666667% !important;
}

@{deep} .ant-col-11 {
  width: 45.83333333% !important;
}

@{deep} .ant-col-12 {
  width: 50% !important;
}

@{deep} .ant-col-13 {
  width: 54.16666667% !important;
}

@{deep} .ant-col-14 {
  width: 58.33333333% !important;
}

@{deep} .ant-col-15 {
  width: 62.5% !important;
}

@{deep} .ant-col-16 {
  width: 66.66666667% !important;
}

@{deep} .ant-col-17 {
  width: 70.83333333% !important;
}

@{deep} .ant-col-18 {
  width: 75% !important;
}

@{deep} .ant-col-19 {
  width: 79.16666667% !important;
}

@{deep} .ant-col-20 {
  width: 83.33333333% !important;
}

@{deep} .ant-col-21 {
  width: 87.5% !important;
}

@{deep} .ant-col-22 {
  width: 91.66666667% !important;
}

@{deep} .ant-col-23 {
  width: 95.83333333% !important;
}

@{deep} .ant-col-24 {
  width: 100% !important;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  margin-bottom: 20px;
  max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.ant-advanced-search-form .ant-calendar-picker {
  width: 100% !important;
}

@{deep} .search-btn-container .ant-form-item-control {
  text-align: right !important;
  margin-right: 24px;
}
</style>

#components-form-demo-advanced-search {
  padding: 24px;
  background: #fff;
  margin-bottom: 20px;
}

/* .ant-advanced-search-project {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
} */

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  margin-bottom: 20px;
  max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.ant-advanced-search-form .ant-calendar-picker {
  width: 100% !important;
}

.search-btn-container .ant-form-item-control {
  text-align: right;
}
